<template>
  <view class="fontContent">
    <!-- 触发弹窗的按钮 -->
    <view class="content" @click="showFeedbackForm">
      <uni-icons type="font" size="26"></uni-icons>
      <span :class="size" style="border: none;">设置 </span>
    </view>
    <!-- 弹窗 -->
    <uni-popup ref="popup" type="dialog" class="fontContentpopup">
      <!-- 弹窗内容 -->
      <uni-popup-dialog @close="closefn" @confirm="confirm" title="字体设置">
        <!-- 下拉框选择反馈类型 -->
        <uni-data-checkbox v-model="fontSet" :localdata="fontList" />
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>
    
    <script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { noticStore } from "@/stores/notic";

const popup = ref(null);
const fontSet = ref("small");
const noticFn = noticStore();
const fontList = ref([
  {
    text: "小号",
    value: "small",
  },
  {
    text: "中号",
    value: "middle",
  },
  {
    text: "大号",
    value: "large",
  },
]);

//获取系统反馈类型
onLoad(async () => {
  fontSet.value = noticFn.getFontSize();
});

// 接受参数
const props = defineProps({
  size: {
    type: String,
    default: "middle",
  },
});

// 显示反馈表单
const showFeedbackForm = () => {
  popup.value.open("");
};
const closefn = () => {
  popup.value.close();
  //清空反馈内容
};
// 提交反馈
const confirm = async () => {
  //将字体大小设置存储到本地
  noticFn.setFontSize(fontSet.value);
  popup.value.close();
};
</script>
  <style   lang="scss" scoped>

.fontContent {
  .content{
    flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .small {
    font-size: 28rpx;
  }
  .middle {
    font-size: 32rpx;
  }
  .large {
    font-size: 36rpx;
  }
  ::v-deep.uni-popup-dialog {
    width: 650rpx;
  }
  ::v-deep
    .uni-data-checklist
    .checklist-group
    .checklist-box
    .checklist-content
    .checklist-text {
    font-size: 36rpx;
  }
  ::v-deep .uni-data-checklist .checklist-group {
    justify-content: center;
  }
}
</style>